﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <title>全球抑郁症患者大数据分析</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <link rel="stylesheet" href="css/comon0.css">
  <style>
    .mapContainer {
      width: 100%;
      /* 设置iframe容器的宽度为100%，以撑满父容器的宽度 */
      height: 130%;
      /* 设置iframe容器的高度，您可以根据需要进行调整 */
      display: flex;
      /* 使用Flex布局使iframe居中显示 */
      justify-content: center;
      /* 在水平方向上居中对齐 */
      align-items: center;
      /* 在垂直方向上居中对齐 */
    }
  </style>

</head>
<script>
  $(window).load(function () {
    $(".loading").fadeOut()
  })

  $(document).ready(function () {
    var whei = $(window).width()
    $("html").css({ fontSize: whei / 20 })
    $(window).resize(function () {
      var whei = $(window).width()
      $("html").css({ fontSize: whei / 20 })
    });
  });
</script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>

<body>
  <div class="canvas" style="opacity: .35">
    <iframe frameborder="0" src="js/index.html" style="width: 100%; height: 137%"></iframe>
  </div>
  <div class="loading">
    <div class="loadbox"> <img alt="加载图像" src="picture/loading.gif"> 数据主页面加载中... </div>
  </div>
  <div class="head">
    <h1>全球抑郁症患者大数据分析</h1>
    <div class="weather"><span id="showTime"></span></div>

    <script>
      var t = null;
      t = setTimeout(time, 1000);
      function time() {
        clearTimeout(t);//清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();//获取时
        var m = dt.getMinutes();//获取分
        var s = dt.getSeconds();//获取秒
        document.getElementById("showTime").innerHTML = "当前时间：" + y + "年" + mt + "月" + day + "日-" + h + "点" + m + "分" + s + "秒";
        t = setTimeout(time, 1000);
      }
    </script>

  </div>
  <div class="mainbox">
    <ul class="clearfix">
      <li>
        <div class="boxall" style="height: 3.2rem">
          <div class="alltitle"><a href="./pages/echarts_1.html" style="color: white">抑郁症患者总人数随年份增长趋势</a></div>
          <div class="allnav" id="echart1"></div>
          <div class="boxfoot"></div>
        </div>
        <div class="boxall" style="height: 3.2rem">
          <div style="height:100%; width: 100%;">
            <div class="alltitle"><a href="./pages/echarts_3.html" style="color: white ">抑郁症患者属性分布图</a></div>

            <div class="sy" id="fb1"></div>
            <div class="sy" id="fb2"></div>
            <div class="sy" id="fb3"></div>
          </div>
          <div class="boxfoot">

          </div>
        </div>
        <div class="boxall" style="height: 4rem">
          <div class="alltitle"><a href="./pages/echarts_2.html" style="color: white">各国家抑郁症患者数随年份趋势</a></div>
          <div class="allnav" id="echart2"></div>
          <div class="boxfoot"></div>
        </div>
      </li>
      <li>
        <div class="bar">
          <div class="barbox">
            <ul class="clearfix">
              <li class="pulll_left counter" data-target="6748420">0</li>
              <li class="pulll_left counter" data-target="95">0</li>
            </ul>
          </div>
          <script>
            const counters = document.querySelectorAll(".counter");
            function updateCounter(counter) {
              const target = +counter.getAttribute("data-target");
              const current = +counter.innerText;
              const increment = target / 100;
              if (current < target) {
                const newValue = Math.ceil(current + increment);
                counter.innerText = newValue;
                requestAnimationFrame(() => updateCounter(counter, 5));
              } else {
                counter.innerText = target;
              }
            }
            counters.forEach(counter => updateCounter(counter));
          </script>
          <div class="barbox2">
            <ul class="clearfix">
              <li class="pulll_left">1985-2016世界总抑郁症患者</li>
              <li class="pulll_left">统计国家总数</li>
            </ul>
          </div>
        </div>
        <div class="map" style="overflow: hidden;">
          <div class="map1"><img alt="背景图1" src="picture/lbx.png"></div>
          <div class="map2"><img alt="背景图2" src="picture/jt.png"></div>
          <div class="map3"><img alt="背景图3" src="picture/map.png"></div>
          <iframe src="./map-world/world.html" width="100%" height="100%" style="position:absolute;z-index:6"
            frameborder="0"></iframe>
        </div>
      </li>
      <li>
        <div class="boxall" style="height:3.2rem">
          <div class="alltitle"><a href="./pages/echarts_4.html" style="color: white">不同性别的抑郁症患者数与年份趋势</a></div>
          <div class="allnav" id="echart4"></div>
          <div class="boxfoot"></div>
        </div>
        <div class="boxall" style="height: 3.2rem">
          <div class="alltitle"><a href="./pages/echarts_5.html" style="color: white">人类发展指数(HDI)与全球抑郁症患者数趋势</a></div>
          <div class="allnav" id="echart5"></div>
          <div class="boxfoot"></div>
        </div>
        <div class="boxall" style="height: 4rem">
          <div class="alltitle"><a href="./pages/echarts_6.html" style="color: white">不同性别的抑郁症患者数线性回归预测</a></div>
          <div class="allnav" id="echart6"></div>
          <div class="boxfoot"></div>
        </div>
      </li>
    </ul>
  </div>
  <div class="back"></div>

</body>

</html>